<template>
  <div style="height: 100vh; display: flex; flex-direction: column">
    <div
      style="
        display: flex;
        flex-direction: row;
        width: 100vw;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="width: 3rem" @click="closeWindow">
        <svg viewBox="-10 -8 104 104">
          <line
            x1="50"
            y1="30"
            x2="30"
            y2="50"
            style="stroke: black; stroke-width: 3"
          />
          <line
            x1="30"
            y1="50"
            x2="50"
            y2="70"
            style="stroke: black; stroke-width: 3"
          />
        </svg>
      </div>

      <div>音乐同步放</div>
      <div>&#12288;&#12288;</div>
    </div>
    <div style="flex-grow: 1">&#12288;</div>
    <div>
      <svg
        t="1668499203446"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6392"
        width="128"
        height="128"
      >
        <path
          d="M805.06 680.16h-17.31V482.63c0-152.05-123.7-275.75-275.75-275.75s-275.75 123.7-275.75 275.75v197.53h-17.31V482.63c0-77.96 30.57-151.47 86.08-206.98 55.51-55.51 129.02-86.08 206.98-86.08s151.47 30.57 206.98 86.08c55.51 55.51 86.08 129.02 86.08 206.98v197.53z"
          fill="#383838"
          p-id="6393"
        ></path>
        <path
          d="M176.72 825.78h-53.56c-28.09 0-50.87-22.78-50.87-50.87V502.86c0-28.09 22.78-50.87 50.87-50.87h104.43v322.92c0 28.09-22.77 50.87-50.87 50.87z"
          fill="#D8D8D8"
          p-id="6394"
        ></path>
        <path
          d="M168.91 834.43h-37.92c-37.13 0-67.34-30.21-67.34-67.34V510.67c0-37.13 30.21-67.34 67.34-67.34h105.26v323.76c0 37.13-30.21 67.34-67.34 67.34z m-37.92-373.79c-27.59 0-50.03 22.45-50.03 50.03v256.42c0 27.59 22.45 50.03 50.03 50.03h37.92c27.59 0 50.04-22.44 50.04-50.03V460.64h-87.96z"
          fill="#383838"
          p-id="6395"
        ></path>
        <path
          d="M847.28 825.78h53.56c28.09 0 50.87-22.78 50.87-50.87V502.86c0-28.09-22.78-50.87-50.87-50.87H796.41v322.92c0 28.09 22.77 50.87 50.87 50.87z"
          fill="#D8D8D8"
          p-id="6396"
        ></path>
        <path
          d="M893.02 834.43H855.1c-37.13 0-67.34-30.21-67.34-67.34V443.33h105.26c37.13 0 67.34 30.21 67.34 67.34v256.42c-0.01 37.13-30.21 67.34-67.34 67.34z m-87.96-373.79v306.45c0 27.59 22.45 50.03 50.04 50.03h37.92c27.59 0 50.03-22.44 50.03-50.03V510.67c0-27.59-22.44-50.03-50.03-50.03h-87.96z"
          fill="#383838"
          p-id="6397"
        ></path>
        <path
          d="M273.74 649.92c-5.34 0-9.71-4.71-9.71-10.46v-90.55c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v90.55c0 5.76-4.37 10.46-9.71 10.46zM750.26 649.92c-5.34 0-9.71-4.71-9.71-10.46v-90.55c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v90.55c0 5.76-4.37 10.46-9.71 10.46zM343.15 688.22c-5.34 0-9.71-4.71-9.71-10.46V510.62c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v167.14c-0.01 5.75-4.37 10.46-9.71 10.46zM423.53 688.22c-5.34 0-9.71-4.71-9.71-10.46V510.62c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v167.14c0 5.75-4.37 10.46-9.71 10.46zM512.71 688.22c-5.34 0-9.71-4.71-9.71-10.46V510.62c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v167.14c0 5.75-4.37 10.46-9.71 10.46zM561.9 722.72c-5.34 0-9.71-4.71-9.71-10.46V476.12c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v236.14c-0.01 5.75-4.37 10.46-9.71 10.46zM715.01 722.72c-5.34 0-9.71-4.71-9.71-10.46V476.12c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v236.14c-0.01 5.75-4.37 10.46-9.71 10.46zM383.59 645c-5.34 0-9.71-4.71-9.71-10.46v-80.69c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v80.69c0 5.75-4.37 10.46-9.71 10.46zM605.21 645c-5.34 0-9.71-4.71-9.71-10.46v-80.69c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v80.69c0 5.75-4.37 10.46-9.71 10.46zM677.35 625.28c-5.34 0-9.71-4.71-9.71-10.46v-41.26c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v41.26c0 5.75-4.37 10.46-9.71 10.46zM645.74 688.22c-5.34 0-9.71-4.71-9.71-10.46V510.62c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v167.14c-0.01 5.75-4.38 10.46-9.71 10.46zM305.06 737.5c-5.34 0-9.71-4.71-9.71-10.46V461.33c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v265.71c0 5.76-4.37 10.46-9.71 10.46zM467.05 737.5c-5.34 0-9.71-4.71-9.71-10.46V461.33c0-5.75 4.37-10.46 9.71-10.46 5.34 0 9.71 4.71 9.71 10.46v265.71c0 5.76-4.37 10.46-9.71 10.46z"
          fill="#383838"
          p-id="6398"
        ></path>
      </svg>
    </div>
    <div style="flex-grow: 2">&#12288;</div>
    <div>
      <div>
        <van-button round type="warning" @click="moduleType=0,openModule=true">&#12288;创建房间&#12288;</van-button>
      </div>
      <div>&#12288;</div>
      <div>
        <van-button round type="default" @click="moduleType=0,openModule=true">&#12288;加入房间&#12288;</van-button>
      </div>
    </div>
    <div
      style="
        flex-grow: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-size: 0.5rem;
        padding-bottom: 1rem;
        color: gray;
      "
    >
      &#12288; 创建派对的客户端可以控制歌曲播放<br />加入派对的客户端只能同步播放<br />v1.0.0.0
      By@WANYL
    </div>
    

    <van-popup v-model="openModule" style="height:100vh">
      <GuestPlayer v-if="moduleType == 1" hook:destroyed="moduleType=0,openModule=false" />
      <HostPlayer v-if="moduleType == 2" hook:destroyed="moduleType=0,openModule=false" />
    </van-popup>
  </div>
</template>
<script>
import { Button } from "vant";
import GuestPlayer from "./GuestPlayer.vue";
import HostPlayer from "./HostPlayer.vue";
import { Popup } from 'vant';
import { Toast } from 'vant';
export default {
  components: {
    "van-button": Button,
    'van-popup':Popup,
    GuestPlayer,
    HostPlayer,
  },
  name: "blackList",

  data() {
    return {
      openModule: false,
      moduleType: 0,
    };
  },
  methods: {
    closeWindow() {
      this.$parent.closeWindow();
    },
  },
  watch:{
    openModule(){
      // if(v==)
      Toast("功能开发中");
    }
  }
  
};
</script>